<template>
	<view>
		<view>
			<table-title content="门禁卡申请表"></table-title>
			<small-title content="基本资料"></small-title>
			<view class="item-table">
				<view-item name="申请人" :value="personMsg.personName"></view-item>
				<view-item name="手机号码" :value="personMsg.phoneNumber"></view-item>
				<view-item name="租户名称" :value="personMsg.companyName"></view-item>
				<view-item name="楼盘" :value="personMsg.building"></view-item>
				<view class="picker-block" style="border-bottom: none;">
					<view class="picker-note">楼层</view>
					<picker :range="personMsg.floor" style="width: 400rpx;" @change="changeFloor">
						{{ personMsg.floor[floorIndex] }}
					</picker>
				</view>
				<view class="picker-block">
					<view class="picker-note">单元</view>
					<picker :range="personMsg.room[floorIndex]" style="width: 400rpx;" @change="changeRoom">
						{{ personMsg.room[floorIndex][roomIndex] }}
					</picker>
				</view>
				<input-item typeMsg="数量" :isLast="true" @getValue="setNumber"></input-item>
			</view>
			<small-title content="开卡人员信息"></small-title>
			<view v-for="(n,index) in number" :key="index" style="margin-bottom: 10rpx;">
				<view class="item-table">
					<input-item typeMsg="姓名" @getValue="setName(index,$event)"></input-item>
					<input-item typeMsg="身份证号码" :isLast="true" @getValue="setIdCard(index,$event)"></input-item>
				</view>
				<view class="picture-list">
					<view class="picture-block-access">
						<image v-if="hasPicture[index][0]" src="@/static/delete-logo.svg" class="wrong-logo"
							@click="deletePicture(0,index)"></image>
						<image v-if="!hasPicture[index][0]" src="@/static/add-logo.svg" class="picture-style"
							@click="addPicture(0,index)"></image>
						<image v-if="hasPicture[index][0]" :src="imageUrl[index][0]" class="picture-style"
							@click="previewPicture(0,index)"></image>
						<view class="picture-note-access">身份证正面</view>
						<yq-avatar @upload="uploadPicture" :ref="'avatar'+index"></yq-avatar>
					</view>
					<view class="picture-block-access">
						<image v-if="hasPicture[index][1]" src="@/static/delete-logo.svg" class="wrong-logo"
							@click="deletePicture(1,index)"></image>
						<image v-if="!hasPicture[index][1]" src="@/static/add-logo.svg" class="picture-style"
							@click="addPicture(1,index)"></image>
						<image v-if="hasPicture[index][1]" :src="imageUrl[index][1]" class="picture-style"
							@click="previewPicture(1,index)"></image>
						<view class="picture-note-access">身份证反面</view>
						<yq-avatar @upload="uploadPicture" :ref="'avatar'+index"></yq-avatar>
					</view>
				</view>
			</view>
			<button class="add-button" @click="addNumber()">+</button>
			<small-title content="上传缴费凭证"></small-title>
			<view class="picture-block-access" style="margin-bottom: 50rpx;">
				<image v-if="hasPayment[0]" src="@/static/delete-logo.svg" class="wrong-logo"
					@click="deletePayment"></image>
				<image v-if="!hasPayment[0]" src="@/static/add-logo.svg" class="picture-style"
					@click="addPayment(0)"></image>
				<image v-if="hasPayment[0]" :src="paymentImgUrl[0]" class="picture-style"
					@click="previewPayment(0)"></image>
				<view class="picture-note-access">付款凭证</view>
				<yq-avatar @upload="uploadPayment" ref="payAvatar"></yq-avatar>
			</view>
			<view style="margin-bottom: 100rpx;">
				<small-title content="开票信息"></small-title>
				<radio-group class="invoice-group" @change="chooseInvoiceType">
					<label class="invoice-choice">
						<radio value="person" :checked="personFlag"></radio>
						<view>个人</view>
					</label>
					<label class="invoice-choice">
						<radio value="company"></radio>
						<view>单位</view>
					</label>
				</radio-group>
				<view class="item-table" v-if="companyFlag">
					<input-item typeMsg="发票抬头" @getValue="setInvoiceHead"></input-item>
					<input-item typeMsg="税号" @getValue="setCompanyTaxNumber"></input-item>
					<input-item typeMsg="开户银行" :isEmpty="true" @getValue="setCompanyBank"></input-item>
					<input-item typeMsg="银行账号" :isEmpty="true" @getValue="setCompanyBankAccount"></input-item>
					<input-item typeMsg="企业地址" :isEmpty="true" @getValue="setCompanyAddress"></input-item>
					<input-item typeMsg="企业电话" :isLast="true" :isEmpty="true" @getValue="setCompanyPhone"></input-item>
				</view>
				<view class="item-table" v-if="personFlag">
					<input-item typeMsg="发票抬头" :isLast="true" @getValue="setInvoiceHead"></input-item>
				</view>
			</view>
			<button class="confirm-button" @click="confirm">确认</button>
			<view style="height: 200rpx;"></view>
		</view>
		<u-tabbar v-model="current" :list="list" :before-switch="clickTabbar"></u-tabbar>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				floorIndex:0,
				roomIndex:0,
				personFlag: true,
				companyFlag: false,
				companyInvoiceMsg:{
					'invoiceHead':'','taxNumber':'','bankName':'','bankAccount':'',
					'companyAddress':'','companyPhone':''
				},
				personalInvoiceMsg:{
					'invoiceHead':''
				},
				rowNumber: 0,
				number: 1,
				personMsg:{
					'id':'1',
					'personName':'',
					'phoneNumber':'',
					'companyName':'',
					'building':'',
					'floor':[''],
					'room':[
						['']
					]
				},
				imageUrl:[
					['','']
				],
				hasPicture: [
					[false,false]
				],
				cardNumber: '',
				hasPayment: [false],
				paymentImgUrl: [''],
				applicationMsg:[
					{'name':'','idCard':''}
				],
				list: [
					{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						customIcon: false,
					},
					{
						iconPath: "photo",
						selectedIconPath: "photo-fill",
						text: '管家',
						customIcon: false,
					},
					{
						iconPath: "https://cdn.uviewui.com/uview/common/min_button.png",
						selectedIconPath: "https://cdn.uviewui.com/uview/common/min_button_select.png",
						text: '发现',
						customIcon: false,
					},
					{
						iconPath: "play-right",
						selectedIconPath: "play-right-fill",
						text: '消息',
						count: 23,
						customIcon: false,
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '我的',
					},
				],
				current: 0
			}
		},
		methods: {
			changeFloor(e){
				this.floorIndex = e.detail.value
				this.roomIndex = 0
			},
			changeRoom(e){
				this.roomIndex = e.detail.value
			},
			chooseInvoiceType(e){
				if(e.detail.value==='person'){
					this.personFlag = true
					this.companyFlag = false
				}else if(e.detail.value==='company'){
					this.companyFlag = true
					this.personFlag = false
				}
			},
			confirm() {
				let personnelListTmp = []
				for(let i = 0; i < this.number; i++){
					let itemTmp = {'name':'','idcardnum':'','idcard_front':'','idcard_back':''}
					itemTmp.name = this.applicationMsg[i].name
					itemTmp.idcardnum = this.applicationMsg[i].idCard
					itemTmp.idcard_front = this.imageUrl[i][0]
					itemTmp.idcard_back = this.imageUrl[i][1]
					personnelListTmp.push(itemTmp)
				}
				console.log(personnelListTmp)
				if(this.personFlag){
					uni.request({
						url:'http://192.168.3.172:3000/mock/27/mjk/basicinfor/add',
						method:'POST',
						header:{
							'Content-Type' : 'application/json'
						},
						data:{
							'owner_name' : this.personMsg.personName,
							'owner_phone' : this.personMsg.phoneNumber,
							'tenant_name' : this.personMsg.companyName,
							'building_name' : this.personMsg.building,
							'floor_no' : this.personMsg.floor[this.floorIndex],
							'unit_no' : this.personMsg.room[this.floorIndex][this.roomIndex],
							'num' : this.number,
							'payvoucher' : this.paymentImgUrl[0],
							'billing' : {
								'invoice_title' : this.companyInvoiceMsg.invoiceHead,
								'tfn' : this.companyInvoiceMsg.taxNumber,
								'invoice_bank' : this.companyInvoiceMsg.bankName,
								'bank_number' : this.companyInvoiceMsg.bankAccount,
								'company_address' : this.companyInvoiceMsg.companyAddress,
								'company_phone' : this.companyInvoiceMsg.companyPhone,
								'invoice_type_value' : '0',
								'module_type_value' : '1'
							}
						}
					})
				}else{
					uni.request({
						url:'http://192.168.3.172:3000/mock/27/mjk/basicinfor/add',
						method:'POST',
						header:{
							'Content-Type' : 'application/json'
						},
						data:{
							'owner_name' : this.personMsg.personName,
							'owner_phone' : this.personMsg.phoneNumber,
							'tenant_name' : this.personMsg.companyName,
							'building_name' : this.personMsg.building,
							'floor_no' : this.personMsg.floor[this.floorIndex],
							'unit_no' : this.personMsg.room[this.floorIndex][this.roomIndex],
							'num' : this.number,
							'payvoucher' : this.paymentImgUrl[0],
							'billing' : {
								'invoice_title' : this.personalInvoiceMsg.invoiceHead,
								'invoice_type_value' : '1',
								'module_type_value' : '1'
							}
						}
					})
				}
				// uni.navigateTo({
				// 	url:'../history/history'
				// })
			},
			uploadPicture(rsp) {
			    this.$set(this.imageUrl[this.rowNumber], rsp.index, rsp.path);
			},
			uploadPayment(rsp) {
			    this.$set(this.paymentImgUrl, rsp.index, rsp.path);
			},
			addNumber() {
				console.log(this.$refs)
				this.number++
				let tmp = [...this.hasPicture]
				let imgTmp = [...this.imageUrl]
				let appMsg = [...this.applicationMsg]
				let newTmp = [[false,false]]
				let newImgTmp = [['','']]
				let appTmp = [{'name':'','idCard':''}]
				tmp = [...tmp,...newTmp]
				imgTmp = [...imgTmp,...newImgTmp]
				appMsg = [...appMsg,...appTmp]
				this.hasPicture = tmp
				this.imageUrl = imgTmp
				this.applicationMsg = appMsg
			},
			addPicture(e,index) {
				let rowNumberTmp = this.rowNumber
				rowNumberTmp = index
				this.rowNumber = rowNumberTmp
				let tmp = [...this.hasPicture]
				tmp[index][e] = true
				this.hasPicture = tmp
				let refName = 'avatar' + index
				console.log(this.$refs[`avatar${index}`][e])
				this.$refs[`avatar${index}`][e].fChooseImg((index,e),{
				    selWidth: "640upx", selHeight: "400upx",
				    expWidth: '640upx', expHeight: '400upx'
				});
			},
			addPayment(index) {
				let tmp = [...this.hasPayment]
				tmp[index] = true
				this.hasPayment = tmp
				this.$refs.payAvatar.fChooseImg(index,{
				    selWidth: "640upx", selHeight: "400upx",
				    expWidth: '640upx', expHeight: '400upx'
				});
			},
			previewPicture(e,index){
				uni.previewImage({
					urls:this.imageUrl[index].slice(e,e+1),
					longPressActions:{
						itemList:['发送给朋友','保存图片','收藏']
					}
				})
			},
			previewPayment(e){
				uni.previewImage({
					urls:this.paymentImgUrl.slice(e,e+1),
					longPressActions:{
						itemList:['发送给朋友','保存图片','收藏']
					}
				})
			},
			setInvoiceHead(e){
				this.personalInvoiceMsg.invoiceHead = e
				this.companyInvoiceMsg.invoiceHead = e
			},
			setCompanyTaxNumber(e){
				this.companyInvoiceMsg.taxNumber = e
			},
			setCompanyBank(e){
				this.companyInvoiceMsg.bankName = e
			},
			setCompanyBankAccount(e){
				this.companyInvoiceMsg.bankAccount = e
			},
			setCompanyAddress(e){
				this.companyInvoiceMsg.companyAddress = e
			},
			setCompanyPhone(e){
				this.companyInvoiceMsg.companyPhone = e
				console.log(this.personalInvoiceMsg)
				console.log(this.companyInvoiceMsg)
			},
			setNumber(e){
				this.cardNumber = e
			},
			deletePicture(e,index){
			    let tmp = [...this.hasPicture]
			    let imgTmp = [...this.imageUrl]
			    imgTmp[index][e] = ''
			    tmp[index][e] = !tmp[index][e]
			    this.hasPicture = tmp
			    this.imageUrl = imgTmp
			},
			addPayment(index) {
				let tmp = [...this.hasPayment]
				tmp[index] = true
				this.hasPayment = tmp
				this.$refs.payAvatar.fChooseImg(index,{
				    selWidth: "640upx", selHeight: "400upx",
				    expWidth: '260upx', expHeight: '260upx'
				});
			},
			deletePayment(){
				let tmp = [...this.hasPayment]
				let imgTmp = [...this.paymentImgUrl]
				imgTmp[0] = ''
				tmp[0] = false
				this.hasPayment = tmp
				this.paymentImgUrl = imgTmp
			},
			setName(index,e){
				let appTmp = this.applicationMsg
				appTmp[index].name = e
				this.applicationMsg = appTmp
			},
			setIdCard(index,e){
				let appTmp = this.applicationMsg
				appTmp[index].idCard = e
				this.applicationMsg = appTmp
			},
			clickTabbar(index) {
				switch(index){
					case 0:
						console.log('首页')
						uni.redirectTo({
							url:'/pages/home/home'
						})
						return true
						break
					case 1:
						console.log('管家')
						return true
						break
					case 2:
						console.log('发现')
						return true
						break
					case 3:
						console.log('消息')
						uni.redirectTo({
							url:'/pages/systemAnnoucement/list/list'
						})
						return true
						break
					case 4:
						console.log('我的')
						uni.navigateTo({
							url:'/pages/myPage/myPage'
						})
						return true
						break
				}
			}
		},
		mounted() {
			uni.request({
				url:'http://192.168.3.172:3000/mock/27/v1/queryTenantAccountById',
				method:'GET',
				header:{
					'Content-Type' : 'application/x-www-form-urlencoded',
				},
				data:{
					'id' : this.personMsg.id
				},
				success: (res) => {
					let flootTmp = []
					let roomTmp = []
					let arr = []
					this.personMsg.personName = res.data.result.owner_name
					this.personMsg.phoneNumber = res.data.result.owner_phone
					this.personMsg.companyName = res.data.result.tenant_name
					this.personMsg.building = res.data.result.building_name
					for(let i = 0; i < res.data.result.unit.length; i++){
						flootTmp.push(res.data.result.unit[i].floor_no)
						arr = []
						for(let j = 0; j < res.data.result.unit[i].unit.length; j++){
							arr.push(res.data.result.unit[i].unit[j].unit_no)
						}
						roomTmp.push(arr)
					}
					this.personMsg.floor = flootTmp
					this.personMsg.room = roomTmp
				}
			})
		}
	}
</script>

<style>
	page{
		background-color: #F1F1F1
	}
	.invoice-group{
		display: flex;
		align-items: center;
		height: 80rpx;
	}
	.invoice-choice{
		display: flex;
		margin-left: 50rpx;
	}
	.item-table{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.add-button::after{
		border: none;
	}
	.picture-part{
		display: flex;
		margin: 0 0 10rpx 50rpx;
		font-size: 100rpx;
		font-weight: 200;
		align-items: center;
		justify-content: center;	
		width: 150rpx;
		height: 150rpx;
		border: dashed 1rpx #000000;
	}
	.picture-style{
		width: 155rpx;
		height: 155rpx;
		margin: 0 0 10rpx 50rpx;
	}
	.picture-note-access{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 50rpx;
		font-size: 30rpx;
	}
	.picture-block-access{
		width: 201rpx;
		display: flex;
		flex-direction: column;
	}
	.add-button{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-weight: 1000;
		font-size: 50rpx;
		width: 100rpx;
		height: 100rpx;
		background-color: #F1F1F1;
	}
	.confirm-button{
		background-color: #007AFF;
		color: #FFFFFF;
		width: 650rpx;
	}
	.wrong-logo{
		width: 40rpx;
		height: 40rpx;
		margin-bottom: -40rpx;
		margin-left: 165rpx;
		z-index: 999;
		background-color: #555555
	}
	.picture-list{
		display: flex;
		margin-top: 10rpx;
	}
	.picker-block{
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #FFFFFF;
		border: solid 1rpx #C0C0C0;
		height: 100rpx;
	}
	.picker-note{
		display: flex;
		flex-direction: column;
		margin-left: 50rpx;
		justify-content: center;
		height: 100rpx;
		width: 200rpx;
	}
</style>
